import React from "react";
import axios from 'axios'
import './product.css'
import { useState, useEffect } from "react";
import { useParams } from 'react-router-dom'
export default function Cateagory() {
    var params = useParams()
    var [arr, setArr] = useState([])
    useEffect(() => {
        axios
            .get(
                `https://apipc-xiaotuxian-front.itheima.net/goods?id=${params.id}`
            )
            .then(res => {
                if (res.data.msg == '操作成功') {
                    // setArr([...arr])
                    console.log(arr);
                    arr = res.data.result;
                }
            });
    }, [params.id])
    return <div>
        <div className="xtx-bread container">
            <div className="xtx-bread-item">
                <a href="#/" className="router-link-active">首页</a>
            </div>
            <i className="iconfont icon-angle-right"></i>
            <div className="xtx-bread-item">
                <span>{ }</span>
            </div>
            <i className="iconfont icon-angle-right"></i>
            <div className="xtx-bread-item">
                <span>{ }</span>
            </div>
            <i className="iconfont icon-angle-right"></i>
            <div className="xtx-bread-item">
                <span>{ }</span>
            </div>
        </div>

        <div className="container">
            <div className="goods-info">
                <div className="media">
                    <div className="goods-image">
                        <div className="middle">
                            <div>
                                <img src="srcstr" title="点击大图预览" />
                            </div>
                            <div className="coverLayerMouse"></div>
                            <div
                                className="coverLayerMaskTop"
                            ></div>
                            <div className="coverLayerRight">
                                <div className="coverLayerRightImg">
                                    <img src="srcstr" />
                                </div>
                            </div>
                        </div>
                        <ul id="small">
                            <li>
                                <img src="item" alt="" />
                            </li>
                        </ul>
                    </div>
                    <ul className="goods-sales">
                        <li data-v-34ceb5ea="">
                            <p>销量人气</p>
                            <p>200+</p>
                            <p><i className="el-icon-s-grid"></i>销量人气</p>
                        </li>
                        <li>
                            <p>商品评价</p>
                            <p>400+</p>
                            <p><i className="el-icon-s-tools"></i>查看评价</p>
                        </li>
                        <li>
                            <p>收藏人气</p>
                            <p>600+</p>
                            <p><i className="el-icon-date"></i>收藏商品</p>
                        </li>
                        <li>
                            <p>品牌信息</p>
                            <p>苏宁电器</p>
                            <p><i className="el-icon-coin"></i>品牌主页</p>
                        </li>
                    </ul>
                </div>
                <div className="spec">
                    <p className="g-name">{ }</p>
                    <p className="g-desc">{ }</p>
                    <p className="g-price">
                        <span id="news">￥{ }</span
                        ><span id="olds">￥{ }</span>
                    </p>
                    <div className="g-service">
                        <dl>
                            <dt>促销</dt>
                            <dd>12月好物放送，App领券购买直降120元</dd>
                        </dl>
                        <dl>
                            <dt>配送</dt>
                            <dd>
                                <span>至</span>
                                <div className="xtx-city">
                                    <div className="select">
                                        <span
                                            className="value" >{ }
                                            <i className="el-icon-arrow-down"></i>
                                        </span>

                                        <div className="option" v-show="showareaList">
                                            <span>{ }</span>
                                        </div>
                                    </div>
                                </div>
                            </dd>
                        </dl >
                        <dl>
                            <dt>服务</dt>
                            <dd>
                                <span>无忧退货</span><span>快速退款</span><span>免费包邮</span><span>了解详情</span>
                            </dd>
                        </dl>
                    </div >
                    <div className="goods-sku">
                        <dl>
                            <dt>{ }</dt>
                            <dd className="ddd">
                                <a href="#" >
                                    <img
                                        src="item.picture"
                                        alt=""
                                        title="item.name"
                                    />
                                </a>
                                <div className="spandiv">
                                    <span>{ }</span>
                                </div>
                            </dd>
                        </dl>
                        <dl >
                            <dt>{ }</dt>
                            <dd>
                                <span>{ }</span>
                            </dd>
                        </dl >
                    </div >
                    <div className="xtx-numbox">
                        <div className="label">数量</div>
                        <div className="numbox">
                            <a href="#">-</a>
                            <input type="text" />
                            <a href="#">+</a>
                        </div >
                    </div >
                    <button
                        className="xtx-button ellipsis middle primary">
                        加入购物车
                    </button>
                </div >
            </div >
            <div className="goods-relevant">
                <div className="header">
                    <i className="icon"></i><span className="title">猜你喜欢</span>
                </div>
                {/* <轮播图区块 */}
                <div className="xtx-carousel" >
                    <el-carousel interval="5000" arrow="always">
                        <el-carousel-item>
                            <ul className="carousel-body">
                                <li className="carousel-item fade">
                                    <div className="slider">
                                        <a
                                            href="#">
                                            <img src="item.picture" alt="" />
                                            <p className="name ellipsis">{ }</p>
                                            <p className="price">¥{ }</p>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </el-carousel-item>
                        <el-carousel-item>
                            <ul className="carousel-body">
                                <li className="carousel-item fade">
                                    <div className="slider">
                                        <a
                                            href="#">
                                            <img src="item.picture" alt="" />
                                            <p className="name ellipsis">{ }</p>
                                            <p className="price">¥{ }</p>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </el-carousel-item>
                        <el-carousel-item>
                            <ul className="carousel-body">
                                <li className="carousel-item fade">
                                    <div className="slider">
                                        <a href="#">
                                            <img src="item.picture" alt="" />
                                            <p className="name ellipsis">{ }</p>
                                            <p className="price">¥{ }</p>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </el-carousel-item >
                        <el-carousel-item>
                            <ul className="carousel-body">
                                <li className="carousel-item fade">
                                    <div className="slider">
                                        <a href="#">
                                            <img src="item.picture" alt="" />
                                            <p className="name ellipsis">{ }</p>
                                            <p className="price">¥{ }</p>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </el-carousel-item>
                    </el-carousel>
                </div >
            </div >
            <div className="goods-footer">
                <div className="goods-article">
                    <div className="goods-tabs">
                        <div className="goods-tabs">
                            <nav>
                                <a href="#">商品详情</a>
                                <a href="#">商品评价
                                    <span>({ })</span>
                                </a>
                            </nav>
                            <div className="goods-detail">
                                <ul className="attrs">
                                    <li>
                                        <span className="dt">{ }</span>
                                        <span className="dd">{ }</span>
                                    </li>
                                </ul>
                                <img src="m" alt="" />
                            </div>
                            <div className="goods-tabs">
                                <div className="goods-tabs">
                                    <div className="goods-comment">
                                        <div className="head">
                                            <div className="data">
                                                <p>
                                                    <span>{ }</span>
                                                    <span>人购买</span>
                                                </p>
                                                <p>
                                                    <span>{ }</span>
                                                    <span>好评率</span>
                                                </p>
                                            </div>
                                            <div className="tags">
                                                <div className="dt">大家都在说：</div>
                                                <div className="dd">
                                                    <a href="#!" >全部评价({ })</a>
                                                    <a href="#!" >有图({ })</a>
                                                    <a href="#!">{ }({ })</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="sort">
                                            <span>排序：</span>
                                            <a href="#!" >默认</a >
                                            <a href="#!">最新</a>
                                            <a href="#!">最热</a>
                                        </div>

                                        <div className="list">
                                            <div className="item">
                                                <div className="user">
                                                    <img src="i.member.avatar" alt="" />
                                                    <span>{ }</span>
                                                </div>
                                                <div className="body">
                                                    <div className="score">
                                                        <el-rate disabled text-color="#ff9900" score-template="{value}"></el-rate>
                                                        <span className="attr">{ }:{ }</span
                                                        >
                                                    </div>

                                                    <div className="text">{ }</div>

                                                    <div className="goods-comment-image" >
                                                        <div className="list">
                                                            <a href="">
                                                                <img src="z" alt="" />
                                                            </a>
                                                        </div>
                                                    </div>

                                                    <div className="time">
                                                        <span>{ }</span>
                                                        <span className="zan">
                                                            <i className="iconfont icon-thumbs-o-up"></i>
                                                            { }
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="xtx-pagination">
                                            <a href="#!" >上一页</a >
                                            <a href="#!" >{ }</a >
                                            <a href="#!">下一页</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div >
                </div >
                <div className="goods-aside">
                    <div className="goods-hot">
                        <h3>24小时热销榜</h3>
                        <div>
                            <a href="#" className="goods-item" >
                                <img alt="" src="item.picture" />
                                <p className="name ellipsis">{ }</p>
                                <p className="desc ellipsis">{ }</p>
                                <p className="price">¥{ }</p>
                            </a>
                        </div>
                    </div>
                    <div className="goods-hot">
                        <h3>周热销榜</h3>
                        <div>
                            <a href="#" className="goods-item">
                                <img alt="" src="item.picture" />
                                <p className="name ellipsis">{ }</p>
                                <p className="desc ellipsis">{ }</p>
                                <p className="price">¥{ }</p>
                            </a>
                        </div>
                    </div >
                </div >
            </div >
            <div className="goods-warn">
                <div className="goods-warn">
                    <h3>注意事项</h3>
                    <p className="tit">• 购买运费如何收取？</p>
                    <p>
                        单笔订单金额(不含运费)满88元免邮费;不满88元,每单收取10元运费。(港澳台地区需满500元免邮费;不满500元,每单收取30元运费)
                    </p>
                    <br />
                    <p className="tit">• 使用什么快递发货?</p>
                    <p>默认使用顺丰快递发货(个别商品使用其他快递)</p>
                    <p>配送范围覆盖全国大部分地区(港澳台地区除外)</p>
                    <br />
                    <p className="tit">• 如何申请退货?</p>
                    <p>
                        1.自收到商品之日起30日内,顾客可申请无忧退货,退款将原路返还,不同的银行处理时间不同,预计1-5个工作日到账;
                    </p>
                    <p>2.内裤和食品等特殊商品无质量问题不支持退货；</p>
                    <p>
                        3.退货流程：
                        确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；
                    </p>
                    <p>
                        4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。
                    </p>
                </div>
            </div>
        </div>
    </div >
}